//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Progress
   
   Default Mendix Progress Widget.
========================================================================== */

.mx-progress {
    color: $font-color-default;
    background: $bg-color-secondary;
    .mx-progress-message {
        color: $font-color-default;
    }
    .mx-progress-indicator {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        height: 2px;
        margin: auto;
        padding: 0;
        border-radius: 0;
        background: $gray-lighter;

        &:before,
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 50%;
            height: 2px;
            content: "";
            transform: translate3d(-100%,0,0);
            background: $brand-primary;
        }
        &::before {
            animation: loader 2s infinite;
        }

        &::after {
            animation: loader 2s -2s infinite;
        }
    }
}




@keyframes loader {
    0% {
        transform: translate3d(-100%,0,0);
    }
    100% {
        transform: translate3d(200%,0,0);
    }
}

.profile-phone {
    .mx-progress-empty {
        position: relative;
        top: 45px;
        left: 0;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        height: 1px;
        margin: auto;
        padding: 0;
        border-radius: 0;
        background: $gray-lighter;

        &:before,
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 50%;
            height: 1px;
            content: "";
            transform: translate3d(-100%,0,0);
            background: $brand-primary;
        }
        &::before {
            animation: loader 2s infinite;
        }

        &::after {
            animation: loader 2s -2s infinite;
        }

        .mx-progress-indicator {
            display: none;
        }
    }
}
